<template>
    <div style="display: inline-block;min-width: 100%">
      <div class="search-bar">
        <Menu mode="horizontal" @on-select="tabSelect" active-name="electric">
          <MenuItem name="electric">
            <i class="monitor icon-electric"></i>
            <span>电</span>
          </MenuItem>
          <MenuItem name="water">
            <i class="monitor icon-water"></i>
            <span>水</span>
          </MenuItem>
          <MenuItem name="coolFlow">
            <i class="monitor icon-cool-flow"></i>
            <span>冷量</span>
          </MenuItem>
          <MenuItem name="gas">
            <i class="monitor icon-gas"></i>
            <span>燃气</span>
          </MenuItem>
          <MenuItem name="compressionAir">
            <i class="monitor icon-compression-air"></i>
            <span>压缩空气</span>
          </MenuItem>
        </Menu>
        <span class="line"></span>
        <label class="form-label">空间：</label>
        <Select v-model="spaceData" style="width:200px">
          <Option v-for="item in spaceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <label class="form-label">时间：</label>
        <DatePicker type="daterange" placeholder="请选择时间" @on-change="dateChange" style="width: 200px"></DatePicker>
        <Button class="m-l10" type="primary" @click="loadData">实时量</Button>
      </div>
      <div class="tab-con" style="height: 840px;width: 1960px;margin-top: -70px;margin-left: -190px;" v-if="tabActive === 'water' && showTabCon">
        <div class="water-table_01">
          <div class="table-title-big blue-bg">
            <h1>{{waterTitle.name}}</h1>
            <h2>
              <label>瞬时流量 {{waterTitle.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{waterTitle.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul">
            <li class="header">数据层一</li>
            <li>
              <span></span>
              <span>瞬时流量</span>
              <span>累计流量</span>
            </li>
            <li v-for="item in waterList_01" :key="item.name">
              <span>{{item.name}}</span>
              <span>{{item.instant}}</span>
              <span>{{item.total}}</span>
            </li>
          </ul>
          <ul class="list-ul left-border">
            <li class="header">数据层二</li>
            <li>
              <span></span>
              <span>瞬时流量</span>
              <span>累计流量</span>
            </li>
            <li v-for="(item, index) in waterList_02" :class="{blueBg : index == 10}" :key="item.name">
              <span>{{item.name}}</span>
              <span>{{item.instant}}</span>
              <span>{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="water-table_02">
          <div class="table-title-small blue-bg"></div>
          <ul class="list-ul w284">
            <li>
              <span></span>
              <span>瞬时流量</span>
              <span>累计流量</span>
            </li>
            <li v-for="(item, index) in waterList_03" :class="{blueBg : index == 2}" :key="item.name">
              <span>{{item.name}}</span>
              <span>{{item.instant}}</span>
              <span>{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="water-table_03">
          <div class="table-title-small blue-bg"></div>
          <ul class="list-ul w298">
            <li>
              <span></span>
              <span>瞬时流量</span>
              <span>累计流量</span>
            </li>
            <li v-for="(item, index) in waterList_04" :class="{blueBg : index == 5}" :key="item.name">
              <span>{{item.name}}</span>
              <span>{{item.instant}}</span>
              <span>{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="water-table_04">
          <div class="table-title-small blue-bg">
            自有主题
          </div>
          <ul class="list-ul">
            <li class="header">数据层一</li>
            <li>
              <span></span>
              <span>瞬时流量</span>
              <span>累计流量</span>
            </li>
            <li v-for="item in waterList_05" :key="item.name">
              <span>{{item.name}}</span>
              <span>{{item.instant}}</span>
              <span>{{item.total}}</span>
            </li>
          </ul>
          <ul class="list-ul left-border">
            <li class="header">数据层二</li>
            <li>
              <span></span>
              <span>瞬时流量</span>
              <span>累计流量</span>
            </li>
            <li v-for="item in waterList_06" :key="item.name">
              <span>{{item.name}}</span>
              <span>{{item.instant}}</span>
              <span>{{item.total}}</span>
            </li>
          </ul>
        </div>
        <img src="../../assets/water_arrow_01.png" class="water-arrow_01"/>
        <img src="../../assets/water_arrow_02.png" class="water-arrow_02"/>
        <img src="../../assets/water_arrow_03.png" class="water-arrow_03"/>
      </div>
      <div class="tab-con" style="height: 1200px;width: 2363px;margin-top: -120px;margin-left: -230px;" v-if="tabActive === 'electric' && showTabCon">
        <div class="electric-table_01">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_03.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_03.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_03.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_01" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-table_02">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_04.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_04.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_04.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_02" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-table_03">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_05.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_05.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_05.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_03" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-table_04">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_07.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_07.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_07.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_04" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-table_05">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_08.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_08.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_08.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_05" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-table_06">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_09.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_09.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_09.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_06" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-table_07">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_10.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_10.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_10.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">功率</span>
              <span class="w30p">用量</span>
            </li>
            <li v-for="item in electricList_07" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="electric-title_01">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_01.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_01.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_01.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
        </div>
        <div class="electric-title_02">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_02.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_02.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_02.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
        </div>
        <div class="electric-title_03">
          <div class="table-title-big orangeBg">
            <h1>{{electricTitle_06.name}}</h1>
            <h2>
              <label>功率 {{electricTitle_06.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} kW</label>
              <span></span>
              <label>用量 {{electricTitle_06.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} kWh</label>
            </h2>
          </div>
        </div>
        <img src="../../assets/electric-line_01.png" class="electric-line_01"/>
        <img src="../../assets/electric-line_02.png" class="electric-line_02"/>
        <img src="../../assets/electric-line_03.png" class="electric-line_03"/>
      </div>
      <div class="tab-con" style="height: 580px;width: 1488px;margin-top: -60px;margin-left: -180px;" v-if="tabActive === 'coolFlow'">
        <div class="coll-flow-table_01">
          <div class="table-title-big greenBg">
            <h1>{{coolFlowTitle_02.name}}</h1>
            <h2>
              <label>瞬时流量 {{coolFlowTitle_02.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{coolFlowTitle_02.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul w375">
            <li>
              <span class="w40p"></span>
              <span class="w30p">瞬时流量</span>
              <span class="w30p">累积流量</span>
            </li>
            <li v-for="item in coolFlowList_01" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="coll-flow-table_02">
          <div class="table-title-big greenBg">
            <h1>{{coolFlowTitle_03.name}}</h1>
            <h2>
              <label>瞬时流量 {{coolFlowTitle_03.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{coolFlowTitle_03.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="coll-flow-table_03">
          <div class="table-title-big greenBg">
            <h1>{{coolFlowTitle_04.name}}</h1>
            <h2>
              <label>瞬时流量 {{coolFlowTitle_04.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{coolFlowTitle_04.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="coll-flow-table_04">
          <div class="table-title-big greenBg">
            <h1>{{coolFlowTitle_05.name}}</h1>
            <h2>
              <label>瞬时流量 {{coolFlowTitle_05.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{coolFlowTitle_05.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul w375">
            <li>
              <span class="w40p"></span>
              <span class="w30p">瞬时流量</span>
              <span class="w30p">累积流量</span>
            </li>
            <li v-for="item in coolFlowList_02" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="cool-flow-title_01">
          <div class="table-title-big greenBg">
            <h1>{{coolFlowTitle_01.name}}</h1>
            <h2>
              <label>瞬时流量 {{coolFlowTitle_01.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{coolFlowTitle_01.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <img src="../../assets/cool_line.png" class="cool-flow-line_01"/>
      </div>
      <div class="tab-con" v-if="tabActive === 'gas'"></div>
      <div class="tab-con" style="height: 600px;width: 2972px;margin-top: -50px;margin-left: -305px;" v-if="tabActive === 'compressionAir'">
        <div class="compression-air-table_01">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_02.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_02.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_02.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="compression-air-table_02">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_03.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_03.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_03.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="compression-air-table_03">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_04.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_04.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_04.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">瞬时流量</span>
              <span class="w30p">累积流量</span>
            </li>
            <li v-for="item in compressionAirList_01" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="compression-air-table_04">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_05.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_05.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_05.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">瞬时流量</span>
              <span class="w30p">累积流量</span>
            </li>
            <li v-for="item in compressionAirList_02" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="compression-air-table_05">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_06.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_06.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_06.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">瞬时流量</span>
              <span class="w30p">累积流量</span>
            </li>
            <li v-for="item in compressionAirList_03" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="compression-air-table_06">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_07.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_07.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_07.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
          <ul class="list-ul w356">
            <li>
              <span class="w40p"></span>
              <span class="w30p">瞬时流量</span>
              <span class="w30p">累积流量</span>
            </li>
            <li v-for="item in compressionAirList_04" :key="item.name">
              <span class="w40p">{{item.name}}</span>
              <span class="w30p">{{item.instant}}</span>
              <span class="w30p">{{item.total}}</span>
            </li>
          </ul>
        </div>
        <div class="compression-air-table_07">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_08.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_08.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_08.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="compression-air-table_08">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_09.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_09.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_09.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="compression-air-table_09">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_10.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_10.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_10.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <div class="compression-air-title_01">
          <div class="table-title-big redBg">
            <h1>{{compressionAirTitle_01.name}}</h1>
            <h2>
              <label>瞬时流量 {{compressionAirTitle_01.instant || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} M3/s</label>
              <span></span>
              <label>累积流量 {{compressionAirTitle_01.total || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}} M3</label>
            </h2>
          </div>
        </div>
        <img src="../../assets/compression_air_line.png" class="compression-air-line_01"/>
      </div>
    </div>
</template>
<script>
export default {
    name: 'hookup',
    directives: {},
    components: {},
    data () {
        return {
          showTabCon: false,
          eneryTypeMap: {
            water: '水',
            electric: '电',
            coolFlow: '冷量',
            gas: '燃气',
            compressionAir: '压缩空气'
          },
          params: {
            spaceCode: 'ZZ',
            eneryType: '电',
            dataCnt: 10
          },
          spaceList: [
            {value: 'ZZ', label: '郑州工厂'}
          ],
          waterData: [],
          spaceData: 'ZZ',
          tabActive: 'electric',
          waterTitle: {},
          waterList_01: [],
          waterList_02: [],
          waterList_03: [],
          waterList_04: [],
          waterList_05: [],
          waterList_06: [],
          electricTitle_01: {},
          electricTitle_02: {},
          electricTitle_03: {},
          electricTitle_04: {},
          electricTitle_05: {},
          electricTitle_06: {},
          electricTitle_07: {},
          electricTitle_08: {},
          electricTitle_09: {},
          electricTitle_10: {},
          electricList_01: [],
          electricList_02: [],
          electricList_03: [],
          electricList_04: [],
          electricList_05: [],
          electricList_06: [],
          electricList_07: [],
          coolFlowTitle_01: {},
          coolFlowTitle_02: {},
          coolFlowTitle_03: {},
          coolFlowTitle_04: {},
          coolFlowTitle_05: {},
          coolFlowList_01: [],
          coolFlowList_02: [],
          compressionAirTitle_01: {},
          compressionAirTitle_02: {},
          compressionAirTitle_03: {},
          compressionAirTitle_04: {},
          compressionAirTitle_05: {},
          compressionAirTitle_06: {},
          compressionAirTitle_07: {},
          compressionAirTitle_08: {},
          compressionAirTitle_09: {},
          compressionAirTitle_10: {},
          compressionAirList_01: [],
          compressionAirList_02: [],
          compressionAirList_03: [],
          compressionAirList_04: []
        }
    },
    props: {},
    computed: {},
    watch: {},
    methods: {
      loadData () {
        let This = this
        // 加载数据
        window.myapi.iotDevCurSysLineData(this.params).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            let record = resp.data.data.datas
            This.showTabCon = true
            switch (This.tabActive) {
              case 'water':
                This.waterTitle = record[0]
                This.waterList_01 = record.slice(1, 12)
                This.waterList_02 = record.slice(12, 23)
                This.waterList_03 = record.slice(23, 26)
                This.waterList_04 = record.slice(26, 32)
                This.waterList_05 = record.slice(33, 44)
                This.waterList_06 = record.slice(44)
                break
              case 'electric':
                This.electricTitle_01 = record[0]
                This.electricTitle_02 = record[1]
                This.electricTitle_03 = record[2]
                This.electricTitle_04 = record[10]
                This.electricTitle_05 = record[25]
                This.electricTitle_06 = record[32]
                This.electricTitle_07 = record[33]
                This.electricTitle_08 = record[39]
                This.electricTitle_09 = record[45]
                This.electricTitle_10 = record[51]
                This.electricList_01 = record.slice(3, 10)
                This.electricList_02 = record.slice(11, 25)
                This.electricList_03 = record.slice(26, 33)
                This.electricList_04 = record.slice(34, 39)
                This.electricList_05 = record.slice(40, 45)
                This.electricList_06 = record.slice(46, 51)
                This.electricList_07 = record.slice(52)
                break
              case 'coolFlow':
                This.coolFlowTitle_01 = record[0]
                This.coolFlowTitle_02 = record[1]
                This.coolFlowTitle_03 = record[7]
                This.coolFlowTitle_04 = record[8]
                This.coolFlowTitle_05 = record[9]
                This.coolFlowList_01 = record.slice(2, 7)
                This.coolFlowList_02 = record.slice(10)
                break
              case 'compressionAir':
                This.compressionAirTitle_01 = record[0]
                This.compressionAirTitle_02 = record[1]
                This.compressionAirTitle_03 = record[2]
                This.compressionAirTitle_04 = record[3]
                This.compressionAirTitle_05 = record[8]
                This.compressionAirTitle_06 = record[12]
                This.compressionAirTitle_07 = record[17]
                This.compressionAirTitle_08 = record[21]
                This.compressionAirTitle_09 = record[22]
                This.compressionAirTitle_10 = record[23]
                This.compressionAirList_01 = record.slice(4, 8)
                This.compressionAirList_02 = record.slice(9, 12)
                This.compressionAirList_03 = record.slice(13, 17)
                This.compressionAirList_04 = record.slice(18, 21)
                break
            }
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        })
      },
      dateChange (e) {
      },
      tabSelect (e) {
        this.tabActive = e
        this.params.eneryType = this.eneryTypeMap[e]
        this.showTabCon = false
        this.loadData()
      }
    },
    beforeCreate () {
    },
    created () {
    },
    destroyed () {
      if (this.dataClock) clearInterval(this.dataClock)
    },
    mounted () {
      let This = this;
      This.loadData()
      This.dataClock = setInterval(function () {
        This.loadData()
      }, 10000)
    }
}
</script>
<style scoped>
ul,li{
  margin: 0;
  list-style: none;
}
.search-bar{
  height: 80px;
  line-height: 80px;
  background: #fff;
  border-bottom: solid 1px #d7dbe4;
  min-width: 1400px;
}
.ivu-menu-horizontal.ivu-menu-light:after{
  background:none;
}
.ivu-menu-item{
  font-size: 18px;
  padding: 0 5px;
  margin: 0 15px;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
  border-bottom-width: 4px;
  color: #4e78fe;
  border-color: #4e78fe;
}
.ivu-menu-horizontal {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  display: inline-block;
}
.form-label{
  font-size: 14px;
  color: #363636;
  vertical-align: middle;
  margin-left: 32px;
}
.line{
  height: 52px;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
  margin-left:28px;
  background: #d6dbe3;
}
.water-table_01{
  width: 682px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 25px;
  top: 25px;
}
.water-table_02{
  width: 284px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 763px;
  top: 230px;
}
.water-table_03{
  width: 298px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1104px;
  top: 114px;
}
.water-table_04{
  width: 682px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1457px;
  top: 25px;
}
.electric-table_01{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 25px;
  top: 386px;
}
.electric-table_02{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 395px;
  top: 386px;
}
.electric-table_03{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 765px;
  top: 386px;
}
.electric-table_04{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1152px;
  top: 386px;
}
.electric-table_05{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1522px;
  top: 386px;
}
.electric-table_06{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1892px;
  top: 386px;
}
.electric-table_07{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 2262px;
  top: 386px;
}
.coll-flow-table_01{
  width: 375px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 69px;
  top: 208px;
}
.coll-flow-table_02{
  width: 375px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 462px;
  top: 208px;
}
.coll-flow-table_03{
  width: 375px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 855px;
  top: 208px;
}
.coll-flow-table_04{
  width: 375px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1248px;
  top: 208px;
}
.compression-air-table_01{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 34px;
  top: 208px;
}
.compression-air-table_02{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 400px;
  top: 209px;
}
.compression-air-table_03{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 766px;
  top: 209px;
}
.compression-air-table_04{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1132px;
  top: 209px;
}
.compression-air-table_05{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1498px;
  top: 209px;
}
.compression-air-table_06{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1864px;
  top: 209px;
}
.compression-air-table_07{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 2230px;
  top: 209px;
}
.compression-air-table_08{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 2596px;
  top: 209px;
}
.compression-air-table_09{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 2962px;
  top: 209px;
}
.electric-title_01{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1020px;
  top: 36px;
}
.electric-title_02{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 400px;
  top: 215px;
}
.electric-title_03{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1712px;
  top: 215px;
}
.cool-flow-title_01{
  width: 375px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 660px;
  top: 36px;
}
.compression-air-title_01{
  width: 356px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 1370px;
  top: 28px;
}
.cool-flow-title_01{
  width: 375px;
  font-size: 0;
  display: inline-block;
  position: absolute;
  left: 660px;
  top: 36px;
}
.table-title-big{
  height: 100px;
  width: 100%;
  padding-top: 16px;
  box-sizing: border-box;
  display: inline-block;
}
.table-title-small{
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  color: #fff;
}
.table-title-big>h1{
  color: #fff;
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  text-align: center;
}
.table-title-big>h2{
  color: #fff;
  font-size: 0;
  line-height: 20px;
  text-align: center;
  font-weight: normal;
  margin-top: 12px;
}
.table-title-big>h2>label{
  vertical-align: middle;
  font-size: 16px;
}
.table-title-big>h2>span{
  display: inline-block;
  height: 20px;
  width: 1px;
  background: #ffffff;
  vertical-align: middle;
  margin: 0 20px;
}
.tab-con{
  padding: 25px;
  box-sizing: border-box;
  position: relative;
  transform: scale(.8,.8);
  -webkit-transform: scale(.8,.8);
}
.list-ul{
  width: 341px;
  display: inline-block;
  font-size: 0;
  vertical-align: top;
}
.list-ul>li{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 0;
}
.list-ul>li:nth-child(2n){
  background: #2f3b55;
}
.list-ul>li:nth-child(2n+1){
  background: #38425d;
}
.list-ul>li>span{
  width: 33.33%;
  font-size: 14px;
  color: #fff;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
  padding:0 10px;
  box-sizing: border-box;
}
.list-ul>li>span:first-child{
  padding-left: 15px;
}
.list-ul>li.header{
  font-size: 16px;
  text-align: center;
  color: #fff;
}
.blue-bg,.blueBg{
  background: #4e78fe!important;
}
.orangeBg{
  background: #ff9002!important;
}
.greenBg{
   background: #1ebb48!important;
 }
.redBg{
  background: #f65447!important;
}
.m-l10{
  margin-left: 10px;
}
.left-border{
  border-left: solid 1px #fff;
}
.w284{
  width: 284px;
}
.w298{
  width: 298px;
}
.w356{
  width: 356px;
}
.w375{
  width: 375px;
}
.w40p{
  width: 40%!important;
}
.w30p{
  width: 30%!important;
}
.water-arrow_01{
  position: absolute;
  left: 415px;
  bottom: 34px;
}
.water-arrow_02{
  position: absolute;
  left: 810px;
  bottom: 330px;
}
.water-arrow_03{
  position: absolute;
  left: 1150px;
  bottom: 296px;
}
.electric-line_01{
  position: absolute;
  left: 576px;
  top: 136px;
}
.electric-line_02{
  position: absolute;
  left: 196px;
  top: 314px;
}
.electric-line_03{
  position: absolute;
  left: 1336px;
  top: 314px;
}
.cool-flow-line_01{
  position: absolute;
  left: 262px;
  top: 134px;
}
.compression-air-line_01{
  position: absolute;
  left: 208px;
  top: 128px;
}
.ivu-menu-item > i {
  vertical-align: middle;
}
.ivu-menu-item > span{
  vertical-align: middle;
}
</style>
